<template>
  <div class="w-100" style="height: 90%">
    <CustomTableVue
      :showLabel="false"
      :field-list="fieldList"
      :table-data="tableData"
    >
      <template #sbzt="slotProps">
        <!-- <div v-html="getLevelLabel(row.warnLevel, 1)"></div> -->
    <!-- <span :class="textColorClass(slotProps.row.sbzt)">{{ slotProps.row.sbzt }}</span> -->

      </template>

      <template #gjjb="slotProps">
    <span :class="textColorClass(slotProps.row.gjjb)">{{ slotProps.row.gjjb }}</span>

      </template>

      <template #action="slotProps">
        <div v-if="judgeShow(slotProps.row)" class="text-center" @click="location(slotProps.row)">
          <img width="18" src="@/assets/image/svg/location2.png" class="icon" />
        </div>
        <div v-if="!judgeShow(slotProps.row)" class="text-center" >
          <img width="18" src="@/assets/image/svg/location3.png" class="icon" />
        </div>
      </template>
    </CustomTableVue>
  </div>
</template>

<script lang="ts" setup>
import CustomTableVue from "@/components/common/table/CustomTable.vue";
import { useFunc } from "@/hook/useFunc";
import { useOptions } from "@/hook/useOptions";
const fieldList: any = [
  { name: "id", label: "事件编号", type: "TEXT" },
  { name: "gjlx", label: "告警类型", type: "TEXT" },
  { name: "gjjb", label: "告警级别", type: "SLOT", width: 120 },
  { name: "szwz", label: "发生位置", type: "TOOLTIP" },
  { name: "sbzt", label: "处置状态", type: "SLOT", width: 120 },
  { name: "action", label: "操作", type: "SLOT", width: 80 },
];

const tableData = ref([]);
const props = defineProps({
  year: {
    default: 2024,
  },
  month: {
    default: 1,
  },
});
const textColorClass = (status: string) => {
  switch(status) {
    case '低级': return 'blue-text';
    case '中级': return 'orange-text';
    case '高级': return 'red-text';
    default: return '';
  }
}


const optionData = useOptions();
function getLevelLabel(value: any, type: any) {

}
const sblist=ref([])
const location=(item:any)=>{
console.log(item,'item');
let id=item.sbbh
const jg:any= sblist.value.find((e:any)=>e.sbbh===id)
if(jg&&jg.zbX){useFunc().flyByXY4326(jg.zbX,jg.zbY),useFunc().showPopUpGl(item)}

}
const judgeShow=(item:any)=>{
  let id=item.sbbh
  const jg:any= sblist.value.find((e:any)=>e.sbbh===id)
  if(jg&&jg.zbX)return true
  return false
}
onMounted(()=>{
  useFunc().getGLData('/jcyj/queryGjsjList',{xt:'gl'}).then((res:any)=>{
     tableData.value=res.data.data
  })
  useFunc().getGLData('/device/queryDeviceList',{xt:'gl'}).then((res:any)=>{
    sblist.value=res.data.data
  })
})
</script>

<style scoped> 
.white-text {
  color:#E6FDFF 80%
}
.blue-text {
  color: #5CE1FF;
}
.red-text {
  color: red;
}

.orange-text {
  color: orange;
}
</style>
